<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    <style></style>
    <script>

        document.onscroll=throttle(function(){
            console.log('callback')
        },2000)
        
        // 节流是在某个时间范围内只能执行一次，
        // 定义一个嵌套函数，入参是回调函数和时间范围
        // 通过上次执行时间变量，比对当前的时间是否超过上次执行时间+时间范围，是的话就执行回调并且把现在的时间记录为上一次

        // function throttle(callback,timeout){
        //     let pre=0;
        //     return function(){
        //         let now=new Date();
        //         //console.log(now,pre,now-pre)
        //         if(now-pre>timeout){
        //             callback()
        //             pre=now
        //         }
                
        //     }
        // }

        // 通过一个状态变量来控制当前是否可以执行回调函数,
        // 如果可以执行，则把状态设置为等待，然后执行函数，再通过定时器延迟变更状态
        function throttle(callback,timeout){
            let waiting=false;
            return function(){
                if(!waiting){
                    waiting=true;
                    callback();
                    setTimeout(function(){
                        waiting=false;
                    },timeout)
                }
                
                
            }
        }
        
    </script>
</body>
</html>